<template>
  <div>
    <div class="biaoLog">
      <el-table
        :data="
          searchList2.slice(
            (currentPage - 1) * pageSize,
            currentPage * pageSize
          )
        "
        header-align="center"
      >
        <el-table-column type="selection" width="50" align="center">
        </el-table-column>
        <el-table-column
          prop="user_id"
          label="编号"
          width="60"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="user_name"
          label="姓名"
          align="center"
        ></el-table-column>
        <el-table-column prop="user_cardId" label="身份证号" align="center">
        </el-table-column>
        <el-table-column prop="user_phone" label="手机号码" align="center">
        </el-table-column>
        
        <el-table-column
          prop="serve_page"
          label="服务包"
          :formatter="serviceBao"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="projectName"
          label="服务项目"
          :formatter="serviceProject"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="signDoctor"
          label="服务医生"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="serve_state"
          label="服务状态"
          :formatter="serviceStatus"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="contract_date"
          label="申请时间"
          align="center"
        >
        </el-table-column>
        <el-table-column label="操作" align="center" width="100px">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small"
              >查看详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
      <el-pagination
        align="center"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 30, 40, 50]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="searchList2.length"
      >
      </el-pagination>
    </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
axios.defaults.baseURL = "http://localhost:8080";
export default {
  props: {
    searchList2: {
      type: Array,
    },
  },
  data() {
    return {
      list: [],
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页的数据条数
    };
  },
  methods: {
    handleClick(row){
      console.log(row.user_id);
      this.$router.push({
        path:'/serve05',
        query: {
          id: row.user_id,
        },
      });
    },
    //每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
      //   alert(`每页 ${val} 条`);
      this.currentPage = 1;
      this.pageSize = val;
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
    },
    // serviceProject(row, column, cellValue, index) {
    //   console.log(cellValue);
    //   if (cellValue === 1) {
    //     return "随访服务";
    //   } else if (cellValue === 2) {
    //     return "血糖检测";
    //   } else if (cellValue === 3) {
    //     return "血压检测";
    //   }
    // },
    serviceBao(row, column, cellValue, index) {
      console.log(cellValue);
      if (cellValue === 1) {
        return "0-6儿童服务包";
      } else if (cellValue === 2) {
        return "老年人服务包";
      } else if (cellValue === 3) {
        return "慢性病护理包";
      }
    },
    serviceStatus(row, column, cellValue, index) {
      console.log(cellValue);
      if (cellValue === 4) {
        return <font color="#6C76F6">已完成</font>;
      } else if (cellValue === 5) {
        return <font color="#99A5C2">已取消</font>;
      }
    },
  },
};
</script>

<style>

.biaoLog {
  width: 96%;
  height: 100px;
  margin-left: 2%;
  margin-top: 4%;
}
.block{
  margin-top: 20px;
}
</style>